<template>
  <view class="wrap">
    <uv-navbar title="发布策略会&线下活动" autoBack safeAreaInsetTop placeholder :border='false'></uv-navbar>
    <view class="bigTitle">活动信息</view>
    <view class="list">
      <view class="item">
        <view class="left"><text class="red">*</text>活动名称</view>
        <view class="right">
          <uv-input v-model="opt.target_name" placeholder="请输入活动名称" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
      <view class="item" @click="openPeoplePick">
        <view class="left"><text class="red">*</text>参与人数</view>
        <view class="right">
          <uv-input v-model="peop[opt.number]" placeholder="请选择" border="none" suffixIcon='arrow-right' readonly autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
      <view class="item" @click="openStartPick">
        <view class="left"><text class="red">*</text>调研时间</view>
        <view class="right">
          <uv-input v-model="opt.start_time" placeholder="请选择" border="none" suffixIcon='arrow-right' readonly autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
      <!-- <view class="item" @click="openEndPick">
        <view class="left"><text class="red">*</text>截止时间</view>
        <view class="right">
          <uv-input v-model="opt.end_time" placeholder="请选择" border="none" suffixIcon='arrow-right' readonly autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view> -->
      <view class="item" @click="openCity">
        <view class="left"><text class="red">*</text>调研地点</view>
        <view class="right">
          <uv-input v-model="city" placeholder="请选择" border="none" suffixIcon='arrow-right' readonly autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left">详细地址</view>
        <view class="right">
          <uv-input v-model="opt.address" placeholder="请输入详细地址" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left"><text class="red">*</text>组织机构</view>
        <view class="right">
          <uv-input v-model="opt.receiver" placeholder="请输入组织机构" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left"><text class="red">*</text>联系人</view>
        <view class="right">
          <uv-input v-model="opt.contacts" placeholder="请输入联系人" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
      <view class="item">
        <view class="left"><text class="red">*</text>报名费用</view>
        <view class="right">
          <uv-input type="number" v-model="opt.coin" placeholder="为0或不填写视为免费" border="none" autoBlur fontSize='26rpx' color='#000000' placeholderStyle='font-size: 26rpx; color: #D5D5D5'></uv-input>
        </view>
      </view>
    </view>
    <view class="lecture">
      <view class="bigTitle samFont"><text class="red">*</text>活动说明 <text class="desc">最多上传9张图片</text></view>
      <view class="area">
        <view class="test">
          <uv-textarea v-model="opt.desc" placeholder="请输入调研介绍，500字内" maxlength='500' border='none' height='320rpx' :customStyle="{backgroundColor: '#F5F5F5'}"></uv-textarea>
        </view>
      </view>
      <view class="pic">
        <template v-if="imgList.length">
          <view class="upload" v-for="(item, index) in imgList" :key="index">
            <image :src="setUrl(item)" class="img" mode="aspectFill"></image>
            <image src="../../static/delete.png" class="delete" @click="closePic(index)"></image>
          </view>
        </template>
        <view class="upload" v-if="imgList.length < 9" @click="chooseImage">
          <image src="../../static/upload.png" class="img"></image>
        </view>
      </view>
    </view>
    <view class="lecture">
      <template v-if="opt.guest.length">
        <view class="bigTitle noBorder samFont">参会嘉宾</view>
        <view class="base">
          <view class="form" v-for="(item, index) in opt.guest" :key="index">
            <view class="item">
              <image src="../../static/delete.png" class="delete" @click="deletes(index)"></image>
              <view class="column">
                <view class="name"><text class="red">*</text>嘉宾姓名</view>
                <view class="right">
                  <uv-input v-model="item.name" placeholder="请输入" border="none" autoBlur fontSize='32rpx' color='#000000' placeholderStyle='font-size: 32rpx; color: #D5D5D5'></uv-input>
                </view>
              </view>
              <view class="column noFlex">
                <view class="name"><text class="red">*</text>嘉宾头像</view>
                <view class="avatar" @click="upload(index)">
                  <image :src="setUrl(item.avatar)" mode="aspectFill" class="img" v-if="item.avatar"></image>
                  <image src="../../static/upload.png" class="img" v-else></image>
                </view>
              </view>
              <view class="column noFlex">
                <view class="name"><text class="red">*</text>嘉宾介绍</view>
                <view class="areas">
                  <view class="test">
                    <uv-textarea v-model="item.desc" placeholder="请输入嘉宾介绍，500字内" maxlength='500' border='none' height='320rpx' :customStyle="{backgroundColor: '#FFFFFF'}"></uv-textarea>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <view class="add" @click="addUser">+添加参会嘉宾</view>
    </view>
    <view class="footer">
      <button class="btn" hover-class="none" @click="next">保存</button>
      <uv-safe-bottom></uv-safe-bottom>
    </view>
    <view class="safe"></view>
    <uv-safe-bottom></uv-safe-bottom>
    
    <uv-picker ref="peoplePicker" :columns="peopleColumns" keyName="label" confirmColor='#E43222' @confirm="peopleConfirm"></uv-picker>
    <uv-datetime-picker ref="startPicker" mode="datetime" v-model="startTime" :formatter="formatter" :minDate='minDate' confirmColor='#E43222' @confirm="startConfirm"></uv-datetime-picker>
    <!-- <uv-datetime-picker ref="endPicker" mode="date" v-model="endTime" :formatter="formatter" confirmColor='#E43222' @confirm="endConfirm"></uv-datetime-picker> -->
    <uv-picker ref="cityPicker" :columns="cityColumns" confirmColor='#E43222' @confirm="cityConfirm" @change="change"></uv-picker>
    
    <action ref="actionPhoto" :size="{ width: 200, height: 200 }" @click="getImageUrl"></action>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { setUrl, toast, choose } from '@/common';
import { post } from '@/api';
import { useOrder } from '@/store';
import { timeFormat } from '@/uni_modules/uv-ui-tools/libs/function/index.js';
import cityJson from '@/common/city.js';

const modal = ref(null);
const actionPhoto =  ref(null);
const order = useOrder();
const peoplePicker = ref(null);
const peopleColumns = [
  [
    {label: '不限', id: 1},
    {label: '5人', id: 2},
    {label: '10人', id: 3},
    {label: '15人', id: 4},
    {label: '20人', id: 5}
  ]
]
const startPicker = ref(null);
// const endPicker = ref(null);
const cityPicker = ref(null);
const peop = ref({
  1: '不限',
  2: '5人',
  3: '10人',
  4: '15人',
  5: '20人'
})
const minDate = new Date(new Date().getTime() + 60 * 60 * 1000);
let startTime = ref('');
let endTime = ref('');
let cityColumns = ref([]);
let cityList = [];
let city = ref('');
let imgList = ref([]);
let opt = ref({
  target_name: '',
  type: 2,
  number: '1',
  start_time: '',
  // end_time: '',
  province: '',
  city: '',
  address: '',
  receiver: '',
  contacts: '',
  coin: '',
  desc: '',
  images: '',
  guest: []
})
let ids = '';
let edit = 0;

onLoad((option) => {
  ids = option.ids;
  if(option.edit){
    edit = option.edit;
    opt.value = order.invest;
    city.value = `${order.invest.province} ${order.invest.city}`
    opt.value.start_time = timeFormat(order.invest.start_time, 'yyyy-mm-dd');
    imgList.value = opt.value.images.split(',');
  }
  // 配置城市数据
  let province = [];
  for(let item in cityJson){
    province.push(item);
    cityList.push(cityJson[item]);
  }
  cityColumns.value = [province, cityList[0]];
  // end
})

function next(){
  if(!opt.value.target_name) return toast('请输入活动名称');
  if(!opt.value.start_time) return toast('请选择调研时间');
  if(!opt.value.province) return toast('请选择调研地点');
  if(!opt.value.receiver) return toast('请输入组织机构');
  if(!opt.value.contacts) return toast('请输入联系人');
  if(!opt.value.desc) return toast('请输入活动说明');
  if(opt.value.coin != ''){
    if(opt.value.coin < 0) return toast('报名费用必须大于0');
    if(!uni.$uv.test.digits(opt.value.coin)) return toast('报名费用必须为整数');
  }
  let str = 0;
  if(opt.value.guest.length){
    opt.value.guest.forEach(e => {
      if(!e.name) str++;
      if(!e.avatar) str++;
      if(!e.desc) str++;
    })
  }
  if(str) return toast('请填写参会嘉宾完整数据');
  
  const params = {
    target_name: opt.value.target_name,
    type: 2,
    number: opt.value.number,
    start_time: opt.value.start_time,
    province: opt.value.province,
    city: opt.value.city,
    address: opt.value.address,
    receiver: opt.value.receiver,
    contacts: opt.value.contacts,
    coin: opt.value.coin,
    desc: opt.value.desc,
    images: imgList.value.join(','),
    guest: opt.value.guest.map(e => {
      return {
        avatar: e.avatar,
        desc: e.desc,
        name: e.name
      }
    })
  }
  if(edit){
    params.indentity_ids = opt.value.indentity_ids;
    params.id = opt.value.id;
    post('api/survey/editSurvey', params).then(res => {
      if(res.code == 1){
        toast('修改成功');
        setTimeout(() => {
          uni.navigateBack({
            delta: 1
          });
        }, 1000)
      }
    })
  }else{
    params.indentity_ids = ids;
    post('api/survey/createSurvey', params).then(res => {
      if(res.code == 1){
        uni.redirectTo({
        	url: '/pages/invest/success'
        });
      }
    })
  }
}
function addUser(){
  opt.value.guest.push({
    name: '',
    avatar: '',
    desc: ''
  })
}
function deletes(index){
  opt.value.guest.splice(index, 1);
}
function openPeoplePick(){
  peoplePicker.value.open();
}
function peopleConfirm(e){
  const val = e.value[0];
  opt.value.number = val.id;
}
function openStartPick(){
  startPicker.value.open();
}
function startConfirm(e){
  opt.value.start_time = timeFormat(e.value, 'yyyy-mm-dd hh:MM');
}
// function openEndPick(){
//   endPicker.value.open();
// }
// function endConfirm(e){
//   endPicker.value.close();
//   if(!opt.value.start_time) return toast('请选择调研时间');
//   if(e.value < dateToTimestamp(opt.value.start_time)) return toast('截止时间不能少于调研时间');
//   opt.value.end_time = timeFormat(e.value, 'yyyy-mm-dd');
// }
function dateToTimestamp(date) {
  return new Date(date).getTime();
}
function openCity(){
  cityPicker.value.open();
}
function change(e) {
  const { columnIndex , index} = e;
  if (columnIndex === 0) {
    cityPicker.value.setColumnValues(1, cityList[index]);
  }
}
function cityConfirm(e){
  opt.value.province = e.value[0];
  opt.value.city = e.value[1];
  city.value = `${e.value[0]} ${e.value[1]}`;
  cityPicker.value.close();
}
let storage = '';
let idx = '';
function chooseImage(){
  storage = 'imgList';
  
  actionPhoto.value.open();
}
function closePic(index){
  imgList.value.splice(index, 1);
}
function upload(index){
  storage = 'guest';
  
  idx = index;
  actionPhoto.value.open();
}
function getImageUrl(url){
  if(storage == 'guest'){
    opt.value.guest[idx].avatar = url;
  }else{
    imgList.value.push(url);
  }
}
function formatter(type, value) {
  if (type === 'year') {
    return `${value}年`
  }
  if (type === 'month') {
    return `${value}月`
  }
  if (type === 'day') {
    return `${value}日`
  }
  if(type === 'hour'){
    return `${value}时`
  }
  if(type === 'minute'){
    return `${value}分`
  }
  return value
}
</script>

<style lang="scss" scoped>
  .safe{
    width: 100%;
    height: 208rpx;
  }
  .footer{
    width: 100%;
    background-color: #fff;
    padding: 0 30rpx;
    padding-top: 16rpx;
    padding-bottom: 30rpx;
    position: fixed;
    left: 0;
    bottom: 0;
    .btn{
      font-size: 34rpx;
    }
  }
  .lecture{
    margin-top: 20rpx;
    padding-bottom: 20rpx;
    background-color: #fff;
    .add{
      width: 100%;
      height: 110rpx;
      line-height: 110rpx;
      text-align: center;
      font-weight: 400;
      font-size: 32rpx;
      color: #E43222;
    }
    .base{
      padding: 0 30rpx;
      .form{
        background: #F5F5F5;
        border-radius: 24rpx;
        padding-bottom: 30rpx;
        width: 100%;
        margin-bottom: 20rpx;
        &:last-child{
          margin-bottom: 0;
        }
        .item{
          width: 100%;
          position: relative;
          .delete{
            width: 32rpx;
            height: 32rpx;
            position: absolute;
            right: 0;
            top: 0;
          }
          .column{
            width: 100%;
            height: 120rpx;
            padding: 0 30rpx;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #E6E6E6;
            &.noFlex{
              display: block;
              height: auto;
              border-bottom: 0;
              padding-top: 30rpx;
            }
            .areas{
              padding-top: 20rpx;
              .test{
                background: #FFFFFF;
                border-radius: 16rpx;
              }
            }
            .avatar{
              width: 210rpx;
              height: 210rpx;
              border-radius: 12rpx;
              overflow: hidden;
              margin-top: 20rpx;
            }
            .name{
              color: #2b2b2b;
              font-size: 32rpx;
              font-weight: 400;
              .red{
                color: red;
              }
            }
          }
        }
      }
    }
    .pic{
      padding: 30rpx;
      padding-top: 0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .upload{
        width: 210rpx;
        height: 210rpx;
        margin-right: 20rpx;
        margin-bottom: 20rpx;
        position: relative;
        .delete{
          width: 32rpx;
          height: 32rpx;
          position: absolute;
          right: 0;
          top: 0;
        }
      }
    }
    .area{
      padding: 30rpx;
      .test{
        background: #F5F5F5;
        border-radius: 16rpx;
      }
    }
  }
  .list{
    background-color: #fff;
    padding: 0 30rpx;
    .item{
      height: 120rpx;
      line-height: 120rpx;
      display: flex;
      align-items: center;
      border-bottom: 1px solid #E6E6E6;
      .right{
        flex: 1;
        width: 0;
      }
      .left{
        font-weight: 400;
        font-size: 32rpx;
        color: #2B2B2B;
        padding-right: 30rpx;
        .red{
          color: red;
        }
      }
    }
  }
  .bigTitle{
    font-weight: 500;
    font-size: 36rpx;
    color: #2B2B2B;
    height: 120rpx;
    line-height: 120rpx;
    padding: 0 30rpx;
    border-bottom: 1px solid #E6E6E6;
    background-color: #fff;
    &.samFont{
      font-size: 32rpx;
    }
    &.noBorder{
      border-bottom: 0;
    }
    .red{
      color: #E43222;
    }
    .desc{
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
    }
  }
  .wrap{
    width: 100%;
    min-height: 100vh;
    background-color: #F5F5F5;
  }
</style>